<admintpl file="header" />
</head>
<body>
<div class="wrap">
	<div class="container" style="padding-top: 60px;">
		<ul class="nav nav-tabs" role="tablist">
			<li role="presentation" class="active">
				<a href="#demo" id="demo-tab" role="tab" data-toggle="tab" aria-controls="demo" aria-expanded="true">示例</a>
			</li>
			<li role="presentation">
				<a href="#log" id="log-tab" role="tab" data-toggle="tab" aria-controls="log">日志</a>
			</li>
		</ul>
		<div class="tab-content">
			<div role="tabpanel" class="tab-pane fade in active" id="demo" aria-labelledby="demo-tab">

				<div class="row" style="margin-top: 20px; margin-left: 10px;">
					<input type="hidden" id="domain" value={$domain}>
					<input type="hidden" id="uptoken_url" value="/index.php?m=Admin&c=VideoSplice&a=upToken">
					<ul class="tip col-md-12 text-mute">
						<li>
							<small>Html5模式大于4M文件采用分块上传。</small>
						</li>
						<li>
							<small>上传图片可查看处理效果。</small>
						</li>
						<li>
							<small>本示例限制最大上传文件100M。</small>
						</li>
					</ul>
					<div class="col-md-12">
						<div id="container">
							<a class="btn btn-default btn-lg " id="pickfiles" href="#" >
								<i class="glyphicon glyphicon-plus"></i>
								<span>选择文件</span>
							</a>
						</div>
					</div>
					<div style="display:none" id="success" class="col-md-12">
						<div class="alert-success">
							队列全部文件处理完毕
						</div>
					</div>
					<div class="col-md-12 ">
						<table class="table table-striped table-hover text-left"   style="margin-top:40px;display:none">
							<thead>
							<tr>
								<th class="col-md-4">Filename</th>
								<th class="col-md-2">Size</th>
								<th class="col-md-6">Detail</th>
							</tr>
							</thead>
							<tbody id="fsUploadProgress">
							</tbody>
						</table>
					</div>
				</div>

			</div>
			<div role="tabpanel" class="tab-pane fade" id="code" aria-labelledby="code-tab">

				<div class="row" style="margin-top: 20px;">
					<div class="col-md-12">
					</div>
				</div>

			</div>
			<div role="tabpanel" class="tab-pane fade" id="log" aria-labelledby="log-tab">
				<pre id="qiniu-js-sdk-log"></pre>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="body">
			<!-- <div class="col-md-12" id="qiniu-js-sdk-log"></div> -->
		</div>
		<div class="modal fade body" id="myModal-video" tabindex="-1" role="dialog" aria-labelledby="videoLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div id="loading_mask" style="position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(0,0,0,0.5);z-index: 99;display:none;">
						<img src="__PUBLIC__/images/loading.gif" style="width:50px;height:50px;position: absolute;top:50%;left: 50%;margin-top: -25px;margin-left: -25px"/>
					</div>
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="videoLabel">视频处理</h4>
					</div>
					<div class="modal-body">
						<div class="modal-body-wrapper text-center row" style="position: relative; margin-left: 0px;">
							<form>
								<video src id='videoShow' controls="controls" class="col-sm-12" style="width: 480px;">
									您的浏览器不支持 video 标签2
								</video>
								<input type="hidden" name="videoUrl" id="videoKey" value>
								<input type="hidden" name="width" id="videoWidth" value>
								<input type="hidden" name="height" id="videoHeight" value>
								<input type="hidden" name="height" id="videoLength" value>
								<div class="clearfix col-sm-12 text-left center-block">
									<div class="form-group col-sm-6" style="display: inline-block;">
										<div class="checkbox">
											<label>
												<input type="checkbox" id="waterMark" checked>添加水印
											</label>
										</div>
									</div>
									<div class="form-group col-sm-6 process_show" id="waterMarkType" style="display: block">
										<div class="col-sm-3">
											<label>图片水印类型</label>
											<select class="form-control" id="water_type">
												<option value="1" selected>小王子PNG左</option>
												<option value="2">小王子JGP右</option>
												<option value="3">看综艺PNG左</option>
												<option value="4">看综艺JGP右</option>
											</select>
										</div>
									</div>
								</div>
								<div class="clearfix col-sm-12 text-left center-block process">
									<div class="form-group col-sm-6" style="display: inline-block;">
										<div class="checkbox">
											<label>
												<input type="checkbox" id="if_cut" class="process_box">视频截取
											</label>
										</div>
									</div>
									<div class="form-group col-sm-6 process_show" id="video_cut" style="display: none">
										<div class="col-sm-3">
											<input type="text" class="form-control" id="video_cut_start" placeholder="开始时间">
										</div>
										<div class="col-sm-3">
											<input type="text" class="form-control" id="video_cut_end" placeholder="结束时间">
										</div>
									</div>
								</div>
								<div class="clearfix col-sm-12 text-left center-block process">
									<div class="form-group col-sm-6" style="display: inline-block;">
										<div class="checkbox">
											<label>
												<input type="checkbox" id="startEnd" class="process_box">添加片头片尾
											</label>
										</div>
									</div>
									<div class="form-group col-lg-6 process_show" style="display: none">
										<div class="col-sm-12" style="display: none;">
											<input type="text" class="form-control" id="videoResult" placeholder="合并结果名称">
										</div>
									</div>
								</div>
								<div class="clearfix col-sm-12 text-left center-block process">
									<div class="form-group col-sm-6" style="display: inline-block;">
										<div class="checkbox">
											<label>
												<input type="checkbox" id="isAsync" class="process_box">是否异步处理
											</label>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="videoProcess">
							提交更改
						</button>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade body" id="myModal-img" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title" id="myModalLabel">图片效果查看</h4>
					</div>
					<div class="modal-body">
						<div class="modal-body-wrapper text-center">
							<a href="" target="_blank" >
								<img src="" alt="" data-key="" data-h="">
							</a>
						</div>
						<div class="modal-body-footer">
							<div class="watermark">
								<span>水印控制：</span>
								<a href="#" data-watermark="NorthWest" class="btn btn-default">
									左上角
								</a>
								<a href="#" data-watermark="SouthWest" class="btn btn-default">
									左下角
								</a>
								<a href="#" data-watermark="NorthEast" class="btn btn-default">
									右上角
								</a>
								<a href="#" data-watermark="SouthEast" class="btn btn-default disabled">
									右下角
								</a>
								<a href="#" data-watermark="false" class="btn btn-default">
									无水印
								</a>
							</div>
							<div class="imageView2">
								<span>缩略控制：</span>
								<a href="#" data-imageview="large" class="btn btn-default disabled">
									大缩略图
								</a>
								<a href="#" data-imageview="middle" class="btn btn-default">
									中缩略图
								</a>
								<a href="#" data-imageview="small" class="btn btn-default">
									小缩略图
								</a>
							</div>
							<div class="imageMogr2">
								<span>高级控制：</span>
								<a href="#" data-imagemogr="left" class="btn btn-default no-disable-click" >
									逆时针
								</a>
								<a href="#" data-imagemogr="right" class="btn btn-default no-disable-click">
									顺时针
								</a>
								<a href="#" data-imagemogr="no-rotate" class="btn btn-default">
									无旋转
								</a>
							</div>
							<div class="text-warning">
								备注：小图片水印效果不明显，建议使用大图片预览水印效果
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<span class="pull-left">本示例仅演示了简单的图片处理效果，了解更多请点击</span>
						<a href="http://developer.qiniu.com/docs/v6/api/reference/fop/image/" target="_blank" class="pull-left">七牛官方文档</a>
						<button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="__PUBLIC__/js/common.js"></script>
<script src="__PUBLIC__/js/highlight.js"></script>
<script src="__PUBLIC__/js/qiniu.js"></script>
<script src="__PUBLIC__/js/ui.js"></script>
<script src="__PUBLIC__/js/video.js"></script>
<script src="__PUBLIC__/js/plupload/moxie.min.js"></script>
</body>
</html>